utility CSS

Journaux liées à cette note :

Quel impact Tailwind CSS a-t-il sur la taille des pages d'un site de contenu ? #WebDev, #css, #tailwindcss, #JaimeraisUnJour

En février 2023, j'écrivais ceci :

Par ailleurs, je m'interroge sur l'impact du paradigme Tailwind CSS (utility CSS) concernant l'empreinte mémoire des pages.
J'ai le sentiment que la profusion d'attributs class="..." va probablement augmenter considérablement la taille des pages.
#JaimeraisUnJour prendre le temps de mesurer cet aspect.

source

Cette question continue de me trotter dans la tête et mon intuition a évolué au fil du temps. J'ai maintenant l'intuition qu'une compression Brotli fonctionnerait efficacement avec le code Tailwind CSS.

Ce matin j'ai enfin pris le temps de faire des mesures.

J'ai choisi d'effectuer mes mesures sur le site de Blast qui est un site de contenu implémenté en Tailwind CSS.

Voici les mesures que j'ai effectuées :

  • Home page https://www.blast-info.fr
    • Taille mémoire brute (non compressée) de la page complète sans dépendances : 453 Ko
    • Taille mémoire du HTML du body, récupéré avec l'inspecteur Firefox via "copier l'intérieur du HTML" : 178Ko
    • En supprimant tous les attributs class="...", je passe à 145Ko, soit une empreinte brute des attributs class de 33Ko (environ 18% du body)
    • Taille mémoire du texte seul : 5ko (2%)
    • Taille du body compressé Brotli : 25Ko
    • Taille du body sans attributs class="..." compressé Brotli : 23Ko, soit 2Ko pour les attributs classe (environ 8%)
  • Page intérieure https://www.blast-info.fr/articles/2025/macron-bayrou-vers-un-jour-sans-fin-I0AwyT5KTf6_0ywKmLShVQ
    • Taille mémoire brute (non compressée) de la page complète sans dépendances : 404 Ko
    • Taille mémoire brute du HTML du body, récupéré avec l'inspecteur Firefox via "copier l'intérieur du HTML" : 281ko
    • En supprimant tous les attributs class="...", je passe à 251Ko, soit une empreinte brute des attributs class de 30Ko (environ 10% du body)
    • Taille mémoire du texte seul : 34ko (environ 12%)
    • Taille du body compressé Brotli : 43Ko
    • Taille du body sans attributs class="..." compressé Brotli : 40Ko, soit 3Ko pour les attributs classe (environ 6%)

Une fois compressé, la partie Tailwind CSS représente 2Ko à 3Ko par page. Il faut noter que ces valeurs constituent probablement une estimation haute, car un site utilisant le paradigme CSS traditionnel emploie généralement aussi des class="…" dans ses pages HTML.

Mon constat : je pense que le surcout de Tailwind CSS sur la taille des pages d'un site de contenu demeure négligeable après compression.

Une autre question que je me pose : quel est l'impact de Tailwind CSS sur l'utilisation mémoire du navigateur ?

Journal du mercredi 22 février 2023 à 10:47 #tailwindcss, #WebDev, #css, #html, #JaimeraisUnJour

J'ai sans doute découvert Tailwind CSS lors du lancement de sa version 1.0.0 en mai 2019, ou alors en février 2020 en parcourant ce thread Hacker News qui contient plus de 300 commentaires.

Après 2 années partagées entre scepticisme et grande curiosité au sujet de cette technologie et voyant la traction croissante de ce projet, début novembre 2022, j'ai décidé de creuser le sujet et de tester Tailwind CSS sur un side project.

En lisant de nombreux threads Hacker News ou Reddit sur Tailwind CSS, je constate toujours la même chose : c'est une technologie très clivante. Il y a ceux qui l'adorent et ceux, plus conservateurs, qui la trouvent complètement absurde.

Après plus de 3 mois d'utilisation de Tailwind CSS, je suis converti, je trouve l'expérience développeur (DX) excellente !

Un des éléments qui m'a fait reconsidérer ma position concernant Tailwind CSS est l'article "Why Tailwind CSS" de Shawn Wang (dit swyx), en particulier cette toute petite phrase :

A lot of production CSS is append only.

source

Cette déclaration me semble totalement juste et reflète exactement ce que je constate dans tous les projets CSS depuis 20 ans.

Cet article m'a aussi convaincu : Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem).

Cependant, je ne suis pas encore convaincu de l'intérêt de Tailwind CSS pour un site de contenu. Pour ce type de site, l'implémentation CSS me semble assez simple, par conséquent, je pense que le paradigme du CSS traditionnel, c'est-à-dire un CSS sémantique, reste plus pertinent.

Par ailleurs, je m'interroge sur l'impact du paradigme Tailwind CSS (utility CSS) concernant l'empreinte mémoire des pages.
J'ai le sentiment que la profusion d'attributs class="..." va probablement augmenter considérablement la taille des pages.
#JaimeraisUnJour prendre le temps de mesurer cet aspect.